<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      >浏览图片</navbar
    >
    <div style="height: 0.45rem"></div>
    <van-divider class="line"
      >(下拉刷新，建议在WIFI环境下调阅以节省流量)</van-divider
    >
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="list">
        <van-checkbox-group v-model="result" @change="cbChange">
          <div class="child" v-for="(item, index) in covlist" :key="index">
            <!-- 0等待扫描，1正在分析，2分析完成，3分析错误，4合并 -->
            <van-tag
              :color="
                item.status == 0
                  ? '#1989fa'
                  : item.status == 1
                  ? '#ff976a'
                  : item.status == 2
                  ? '#07c160'
                  : item.status == 3
                  ? '#ee0a24'
                  : 'rgb(114, 50, 221)'
              "
              class="tags"
              type="primary"
              >{{
                item.status == 0
                  ? "等待扫描"
                  : item.status == 1
                  ? "正在分析"
                  : item.status == 2
                  ? "分析完成"
                  : item.status == 3
                  ? "分析错误"
                  : "已合并"
              }}</van-tag
            >
            <van-checkbox
              v-show="
                item.userName != '演示案例2' && item.userName != '演示案例'
              "
              style="position: absolute; top: 0.55rem"
              :name="item"
              ref="checkboxes"
              :disabled="
                item.status == 0 ||
                item.status == 1 ||
                item.userName == '演示案例2' ||
                item.userName == '演示案例'
              "
            />
            <div class="left">
              <p class="num">{{ index + 1 }}</p>
              <div class="date" @click="toDetails(item)">
                <p style="text-indent: 0.14rem">
                  用户名:
                  <span
                    style="margin-left: 0.12rem"
                    :class="
                      item && item.userName == '演示案例' ? 'bigSize' : ''
                    "
                    >{{ item ? item.userName : "--/--" }}</span
                  >
                </p>
                <p v-if="item && item.userName != '演示案例'">
                  {{ $t("detailList.upload_date") }}:
                  <span style="margin-left: 0.12rem">{{
                    item ? item.creatTime : "--/--"
                  }}</span>
                </p>
                <p>
                  上传方式：
                  <span
                    >{{
                      item && item.uploadRoutea == 1 ? "手机拍照" : ""
                    }}&nbsp;</span
                  >
                  <span
                    >{{
                      item && item.uploadRouteb == 1 ? "电子胶片" : ""
                    }}&nbsp;</span
                  >
                  <span>{{
                    item && item.uploadRoutec == 1 ? "dicom格式" : ""
                  }}</span>
                </p>
                <!-- <p
                  v-show="
                    item.userName != '演示案例2' && item.userName != '演示案例'
                  "
                >
                  查阅状态：
                  <span>
                    {{
                      item.auditStatus == 1
                        ? "等待医生确认"
                        : item.auditStatus == 2
                        ? "医生查阅中"
                        : item.auditStatus == 3
                        ? "查阅完成"
                        : "暂无申请医生阅片"
                    }}</span
                  >
                </p> -->
              </div>
            </div>
            <div class="btn-group">
              <van-button
                plain
                type="info"
                color="#4775d9"
                size="small"
                :disabled="item.status == 0 || item.status == 1"
                @click.stop="toDetails(item)"
                >影像详情</van-button
              >
              <van-button
                plain
                type="primary"
                size="small"
                v-show="
                  item.userName != '演示案例2' && item.userName != '演示案例'
                "
                :disabled="item.status == 0 || item.status == 1"
                @click.stop="toDoctor(item)"
                >名医阅片</van-button
              >
              <!-- <van-button
                plain
                type="warning"
                size="small"
                v-show="
                  item.userName != '演示案例2' && item.userName != '演示案例'
                "
                :disabled="item.status == 0 || item.status == 1"
                @click.stop="toReport(item)"
                >查看报告</van-button
              > -->
              <van-button
                plain
                type="info"
                color="red"
                size="small"
                :disabled="item.status == 0 || item.status == 1"
                @click.stop="deleteData(item)"
                >删除数据</van-button
              >
            </div>
          </div></van-checkbox-group
        >
      </div>
    </van-pull-refresh>

    <transition name="van-slide-right">
      <div class="enterid" v-show="enterShow">
        <van-button
          plain
          @click="openForm"
          color="#4775d9"
          size="small"
          type="info"
          >重新输入影像号</van-button
        >
        <van-icon @click="closeEnter" name="close" size="0.2rem" />
      </div>
    </transition>
    <div class="select-box">
      <p @click="toMerger">
        合并
        <van-icon
          @click.stop="clickMerger"
          class="sicon"
          color="#ff5050"
          name="info-o"
        />
      </p>
      <p @click="toContrast">
        对比
        <van-icon
          class="sicon"
          @click.stop="clickContrast"
          color="#ff5050"
          name="info-o"
        />
      </p>
    </div>
    <div class="tips-box" v-show="showPopover1">
      <p>提示：</p>
      <p>勾选你想要的图片数据</p>
      <p>点击合并按钮进行合并</p>
      <p>（最多只能选五个）</p>
    </div>
    <div class="tips-box2" v-show="showPopover2">
      <p>提示：</p>
      <p>勾选你想要的图片数据</p>
      <p>点击对比按钮进行对比</p>
      <p>（最多只能选两个）</p>
    </div>
  </div>
</template>

<script>
import navbar from "@/components/navbar";
import {
  getncpPatientInfoAll,
  getncpPatientInfo,
  patientFlag,
  getUploadList,
  uploadgetList,
  mergedir,
  comparison,
} from "@/api/detailList.js";
import { Toast, Dialog } from "vant";
import { mapGetters } from "vuex";
export default {
  name: "detailList",
  components: { navbar },
  data() {
    return {
      detailData: [],
      pageNow: 1,
      pageSize: 10,
      covlist: [],
      formShow: true,
      patientId: "",
      enterShow: false,
      active: 0,
      userDatas: null,
      result: [],
      showPopover1: false,
      showPopover2: false,
      isLoading: false,
    };
  },
  computed: {
    ...mapGetters(["pId", "userData"]),
  },
  watch: {},
  methods: {
    // 返回上一页
    goBack() {
      // this.$store.commit("list/CLEAR_ID")
      this.$router.replace({ path: "/readList" });
    },
    // 列表数据
    async onLoad() {
      this.userDatas = JSON.parse(this.userData);
      let res = await getUploadList(this.userDatas.userName);
      if (res.data.status == 200) {
        this.covlist = res.data.list;

        let toast1 = Toast.loading({
          message: this.$t("detailList.loading"),
          forbidClick: true,
          overlay: true,
        });
        Toast.setDefaultOptions({ duration: 1000 });
      }
      // let { pageNow, pageSize } = this;
      // getncpPatientInfoAll(pageNow, pageSize, id).then((res) => {
      //   if (res.status.code === 200) {
      //     this.covlist = res.data.result;
      //   }
      // });
    },
    // 获取数据
    getData(id) {
      getncpPatientInfo(id).then((res) => {
        if (res.status.code == 200) {
          this.detailData = res.data;
        }
      });
    },
    // 跳转详情
    toDetails(item) {
      // let dsId = item.folderName;
      // let patientId = this.detailData.info.id;
      // this.$store.commit("list/SAVE_PID", patientId);
      // this.$store.commit("list/SAVE_DID", dsId);
      if (item.status != 0 && item.status != 1) {
        this.$router.push({
          path: "/lungDetail",
          query: { dsid: item.dsId },
        });
      }
    },
    // 报告
    toReport(item) {
      this.$router.push({
        path: "/doctorReport",
      });
      // let dsId = item.folderName;
      // let patientId = this.detailData.info.id;
      // this.$store.commit("list/SAVE_PID", patientId);
      // this.$store.commit("list/SAVE_DID", dsId);
      // if (item.lungId == "1") {
      //   this.$router.push({
      //     path: "/lungReport",
      //   });
      // } else if (item.lungId == "2") {
      //   this.$router.push({
      //     path: "/reportDetail",
      //   });
      // }
    },
    // 输入id
    async formConfirm() {
      this.enterShow = false;
      let res = await patientFlag(this.patientId);
      if (res.data.status == 200) {
        this.getData(this.patientId);
        // this.onLoad(this.patientId);
        this.$store.commit("list/SAVE_PID", this.patientId);
        let toast1 = Toast.loading({
          message: this.$t("detailList.loading"),
          forbidClick: true,
          overlay: true,
        });
        Toast.setDefaultOptions({ duration: 1000 });
      } else {
        // this.enterShow = true;
        Toast.fail("影像号错误，请重新输入！");
        Toast.setDefaultOptions({ duration: 1000 });
        setTimeout(() => {
          this.formShow = true;
        }, 1500);
      }
    },
    formCancel() {
      if (this.pId) {
        this.enterShow = false;
        this.formShow = false;
      } else {
        this.formShow = false;
        this.goBack();
      }
    },
    // 更多
    goMore() {
      this.enterShow = !this.enterShow;
    },
    closeEnter() {
      this.enterShow = false;
    },
    openForm() {
      this.patientId = "";
      this.formShow = true;
    },
    // 删除数据
    deleteData(item) {
      Dialog.confirm({
        title: "提示",
        message: "确认删除此条数据？",
      })
        .then(() => {
          uploadgetList(item.dsId, this.userDatas.userName).then((res) => {
            if (res.data.status == 200) {
              Toast.success("删除成功");
              setTimeout(() => {
                this.onLoad();
              }, 500);
            } else {
              Toast.fail("删除失败");
            }
          });
        })
        .catch(() => {
          Toast.fail("取消");
        });
    },
    // 合并
    toMerger() {
      let { result } = this;
      console.log(result);
      let arr = [];
      if (result.length <= 1 || result.length > 5) {
        Toast.fail("至少选择2个，最多5个");
        Toast.setDefaultOptions({ duration: 1500 });
      } else {
        Dialog.confirm({
          title: "提示",
          message: "确认合并？",
        })
          .then(() => {
            result.forEach((item) => {
              arr.push(item.dsId);
            });
            let data = {
              dsid: arr.join(","),
              name: this.userDatas.userName,
            };
            console.log(data);
            mergedir(data).then((res) => {
              console.log(res);
              if (res.data.status == 200) {
                Toast.success("合并成功");
                setTimeout(() => {
                  this.onLoad();
                }, 500);
              } else {
                Toast.fail(res.data.msg);
              }
            });
          })
          .catch(() => {
            Toast.fail("取消");
          });
      }
    },
    // d对比
    toContrast() {
      let { result } = this;
      let arr = [];
      if (result.length <= 1 || result.length > 2) {
        Toast.fail("只能选择两个进行对比");
        Toast.setDefaultOptions({ duration: 1500 });
      } else {
        Dialog.confirm({
          title: "提示",
          message: "确认对比？",
        })
          .then(() => {
            result.forEach((item) => {
              arr.push(item.dsId);
            });
            let data = {
              dsid: arr.join(","),
              name: this.userDatas.userName,
            };
            comparison(data).then((res) => {
              if (res.data.status == 200) {
                // console.log(data, 11);
                let data1 = JSON.stringify(res.data);
                this.$router.push({
                  path: "/lungDetail",
                  query: { comData: data1, comDsid: data.dsid },
                });
                // Toast.success("合并成功");
                // setTimeout(() => {
                //   this.onLoad();
                // }, 500);
              } else {
                Toast.fail(res.data.msg);
              }
            });
          })
          .catch(() => {
            Toast.fail("取消");
          });
      }
    },
    // 点击合并提示
    clickMerger() {
      this.showPopover1 = !this.showPopover1;
      this.showPopover2 = false;
    },
    // 点击对比提示
    clickContrast() {
      this.showPopover2 = !this.showPopover2;
      this.showPopover1 = false;
    },
    //checkbox选择
    cbChange() {
      this.showPopover1 = false;
      this.showPopover2 = false;
    },
    //刷新
    onRefresh() {
      this.onLoad();
      setTimeout(() => {
        // Toast("刷新成功");
        this.isLoading = false;
        // this.count++;
      }, 1000);
    },
    //
    toDoctor(item) {
      // let items = JSON.stringify(item);
      if (item.status != 0 && item.status != 1) {
        this.$router.push({
          name: "doctorList",
          params: {
            usItems: item,
          },
        });
      }
    },
  },
  async created() {
    window.scrollTo(0, 0);
    let patientId = this.pId;
    if (patientId) {
      // this.formShow = false;
      // this.getData(patientId);
      // this.onLoad(patientId);
    }
    this.onLoad();
  },
  mounted() {
    let _this = this;
    window.addEventListener("scroll", function (e) {
      _this.showPopover1 = false;
      _this.showPopover2 = false;
    });
  },
  destroyed() {},
  filters: {
    time(value) {
      let date = new Date(value.replace(/-/g, "/"));
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      let day = date.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day;
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  // overflow-y: auto;
  & .card {
    width: 94%;
    // height: 2rem;
    background: #ffffff;
    margin: 0 auto;
    margin-top: 10px;
    box-shadow: 0px 0px 10px #cccccc;
    & .van-divider {
      margin: 0;
    }
    & .name {
      text-align: left;
      padding: 10px 15px;
      & img {
        width: 0.3rem;
        height: 0.3rem;
        vertical-align: middle;
      }
      & span {
        height: 0.22rem;
        vertical-align: middle;
        color: #4973d7;
        font-weight: 600;
        margin-left: 0.1rem;
        font-size: 0.2rem;
        display: inline-block;
        width: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    & .mes {
      display: flex;
      justify-content: flex-start;
      padding-bottom: 15px;
      & .box {
        margin: 0 0.3rem 0 0.15rem;
        text-align: left;
        & p {
          & span {
            color: #8d898e;
            font-size: 0.14rem;
          }
          margin: 10px 0;
          font-size: 0.14rem;
        }
      }
    }
  }
  & .list {
    width: 94%;
    margin: 0 auto;
    padding-bottom: 0.45rem;
    & .child {
      position: relative;
      background: #ffffff;
      // height: 1.2rem;
      padding: 0.15rem 0.15rem;
      border-radius: 8px;
      box-shadow: 4px 4px 10px #cccccc;
      margin-bottom: 15px;
      & .left {
        display: flex;
        align-items: center;
        margin-left: 0.35rem;
        // margin-top: 0.1rem;
        // margin-bottom: 0.1rem;
        & .num {
          font-size: 14px;
          color: #4973d7;
        }
        & .date {
          text-align: left;
          margin-left: 0.1rem;
          & p {
            font-size: 0.14rem;
            color: #999898;
            margin: 10px 0;
          }
          & span {
            font-size: 0.14rem;
            color: black;
          }
        }
      }
      & .van-button {
        // display: block;
        // margin-top: 5px;
        margin: 0 0.05rem;
      }
    }
  }
}
.enterid {
  position: fixed;
  top: 50px;
  z-index: 11;
  background: #fff;
  right: 0.1rem;
  padding: 15px 10px;
  border-radius: 10px;
  box-shadow: 4px 4px 10px #cccccc;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  & .van-button {
    margin-right: 0.1rem;
  }
}
.line {
  margin: 0.16rem 0 0.16rem 0;
}
.nettip {
  color: #969799;
  font-size: 0.12rem;
  margin-bottom: 0.1rem;
}
/deep/ .van-tab {
  font-size: 0.14rem !important;
}
.bigSize {
  font-size: 0.18rem !important;
  color: #ff3f3f !important;
}
.select-box {
  position: fixed;
  bottom: 0.2rem;
  width: 95%;
  background: #1989fa;
  border-radius: 0.3rem;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 3px 2px 5px #888888;
  display: flex;
  justify-content: space-around;
  & p {
    width: 100%;
    text-align: center;
    font-size: 0.16rem;
    height: 0.35rem;
    color: #ffffff;
    line-height: 0.35rem;
  }
  & p:nth-of-type(1) {
    border-right: 1px solid #ffffff;
  }
  & .sicon {
    vertical-align: sub;
  }
}
.tips-box {
  width: 1.4rem;
  // height: 0.75rem;
  border: 5px solid #4a4a4a;
  background: #4a4a4a;
  position: fixed;
  border-radius: 0.1rem;
  bottom: 0.6rem;
  left: 15%;
  transform: translateX(-15%);
  & p {
    font-size: 0.12rem;
    margin: 0.05rem 0;
    color: #fff;
  }
}

.tips-box2 {
  width: 1.4rem;
  // height: 0.75rem;
  border: 5px solid #4a4a4a;
  background: #4a4a4a;
  position: fixed;
  border-radius: 0.1rem;
  bottom: 0.6rem;
  right: 15%;
  transform: translateX(15%);
  & p {
    font-size: 0.12rem;
    margin: 0.05rem 0;
    color: #fff;
  }
}
.tags {
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 8px !important;
}
.btn-group {
  // position: absolute;
  text-align: right;
  display: inline-block;
  // right: 0.15rem;
  // bottom: 0.05rem;
  width: 100%;
  padding-top: 0.1rem;
  border-top: 1px solid #eaeaea;
}
.read-status {
  position: absolute;
  top: 0.05rem;
  right: 0.05rem;
  & p {
    font-size: 0.12rem;
  }
}
</style>